<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('货币兑换')}}</header-view>
		<view class="content">
			<view class="card flex_center">
				<view class="item">
					<view class="detail flex_between">
						<view class="name flex">
							<image src="../../static/img/rup.png" mode="widthFix"
								style="width: 66rpx;height: 66rpx;margin-right: 20rpx;"></image>
							<text>RUP</text>
						</view>
						<view class="remaining">
							{{$t('余额:')}}0
						</view>
					</view>
					<u--input :placeholder="$t('请输入数量')" border="none" v-model="amount1" type="text" color="#fff"
						placeholderStyle="{color:'grey'}" :customStyle="{padding:'0 22rpx'}"></u--input>
				</view>
				<image src="../../static/img/exchange.png" mode=""
					style="width: 76rpx;height: 76rpx;margin: 50rpx 0 10rpx;"></image>
				<view class="item">
					<view class="detail flex_between">
						<view class="name flex">
							<image src="../../static/img/usd.png" mode="widthFix"
								style="width: 66rpx;height: 66rpx;margin-right: 20rpx;"></image>
							<text>USD</text>
						</view>
						<view class="remaining">
							{{$t('余额:')}}0
						</view>
					</view>
					<u--input :placeholder="$t('请输入数量')" border="none" v-model="amount2" type="text" color="#fff"
						placeholderStyle="{color:'grey'}" :customStyle="{padding:'0 22rpx'}"></u--input>
				</view>
			</view>
			<u-button class="submit" :text="$t('提交')" @tap="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				amount1: "",
				amount2: "",
			};
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.container {
		.content {
			width: 100%;
			padding: 0 24rpx;

			.card {
				background: linear-gradient(141deg, rgba(34, 35, 89, .77), rgba(5, 17, 43, .77));
				border-radius: 30rpx;
				padding: 0 24rpx 40rpx;
				flex-direction: column;

				.item {
					width: 100%;

					.detail {
						height: 106rpx;
						font-size: 14px;
						font-weight: 400;
						color: #fff;

						.name {
							font-size: 34rpx;
						}
					}

					.u-input {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						background: #303255;
						border-radius: 20rpx;
						padding: 0 22rpx;
					}
				}


			}

			.submit {
				height: 88rpx;
				background: #4c3d89;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #fff;
				margin: 66rpx 0 0;
				border: none;
			}
		}

	}
</style>